<template>
  <sider :show-menu="false">
    <img
      src="@/assets/filter.png"
      class="filter"
      type="primary"
      style="margin: 0 24px 0 auto"
      @click="showFilter = true"
    />
    <div class="dialog-list">
      <div
        v-for="d in paperList"
        :key="d.paperId"
        class="dialog-item"
        :class="{ active: activeDialogId === d.paperId }"
        @click="() => handleSessionItem(d)"
      >
        <div class="paper-icon">
          {{ d.index }}
        </div>
        <div class="paper-title">
          {{ d.title }}
        </div>
      </div>
    </div>

    <a-row style="width: 100%; margin: 8px 0">
      <a-col span="24" :style="{ textAlign: 'right', paddingRight: '24px' }">
        <a-pagination
          v-model:current="current"
          v-model:pageSize="limit"
          :total="total"
          :show-size-changer="true"
          :show-total="(total: number) => `共${total}条`"
          size="small"
        />
      </a-col>
    </a-row>
    <PaperFilter v-model:visible="showFilter" :ids="ids" placement="left" @filter="handleFilter" />
  </sider>
</template>
<script lang="ts" setup>
import { getMstPaperList, type IMstPaper } from '@/api/dialog'
import { computed, onBeforeMount, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import sider from './Sider.vue'

const paperList = ref<IMstPaper[]>([])
const route = useRoute()
const activeDialogId = computed(() => {
  return route.params?.id
})
const showFilter = ref(false)
const loading = ref(false)
const query = ref({})
const total = ref(0)
const limit = ref(10)
const current = ref(1)

function handleFilter(q: any) {
  console.log('query', q)
  query.value = q
  current.value = 1
  loading.value = true
  getMstPaperList({
    ...query.value,
    ids: ids as string,
    limit: limit.value,
    current: current.value
  })
    .then((res) => {
      if (!res.data) return
      paperList.value = res.data.entity.rows.map((o, index) => {
      return {
        ...o,
        index: current.value + index + 1
      }
    })
      total.value = res.data.entity.total
      showFilter.value = false
    })
    .finally(() => {
      loading.value = false
    })
}

const router = useRouter()
function handleSessionItem(item: IMstPaper) {
  localStorage.setItem('__PAPER__', JSON.stringify(item))
  router.push(`/paper/${item.paperId}`)
}
watch(() => limit.value, getPaperList)
watch(() => current.value, getPaperList)
const ids = localStorage.getItem('__PAPER__IDS__')

function getPaperList() {
  if (!ids) return

  getMstPaperList({
    ids: ids,
    limit: limit.value,
    current: current.value
  }).then((res) => {
    if (!res.data.ok) return
    const offset = limit.value * (current.value - 1)
    paperList.value = res.data.entity.rows.map((o, index) => {
      return {
        ...o,
        index: offset + index + 1
      }
    })
    total.value = res.data.entity.total

    // handleSessionItem(chatlist.value?.[0])
  })
}
onBeforeMount(() => {
  getPaperList()
})
</script>
<style lang="scss" scoped>
.filter {
  width: 24px;
  height: 24px;
  cursor: pointer;
  // right: 16px;
}

.dialog-list {
  padding: 16px 0;
  width: 100%;
  overflow: auto;
  position: relative;
}

.dialog-item {
  width: 100%;
  display: flex;
  padding: 8px 0;
  user-select: none;
  align-items: flex-start;
  justify-content: space-between;
  .paper-icon {
    flex: none;
  }

  &:hover {
    color: #2a8bf2;
    .paper-icon {
      background: #3c7bff;
      color: white;
    }
  }

  &.active {
    background-color: #f3f5f8;
    color: #2a8bf2;
    .paper-icon {
      background: #3c7bff;
      color: white;
    }
  }
}

.paper-icon {
  width: 32px;
  height: 30px;
  background: #e6f0f0;
  color: #0d1c2e;
  line-height: 30px;
  border: 1px solid white;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  box-sizing: border-box;
  margin-right: 12px;

  font-size: 16px;
  font-weight: normal;
  text-align: center;
}
.paper-title {
  margin-right: 24px;
  flex: auto;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
